// Dark codemirror theming

#editor .CodeMirror, .quicklook .body .CodeMirror, .dialog .CodeMirror {
    color:var(--grey-0);

    // First the code blocks
    .cm-comment, .cm-fenced-code, .cm-inline-math { color:var(--grey-1); }
    .cm-fenced-code {
        &.cm-comment    { color: var(--grey-3); }
        &.cm-attribute  { color: var(--blue-0); }
        &.cm-builtin    { color: var(--blue-0); } // Some modes use this for keywords
        &.cm-string     { color: var(--green-0); }
        &.cm-string-2   { color: var(--gold-selection-dark); }
        &.cm-variable   { color: var(--grey-1); }
        &.cm-variable-2 {
          color: var(--blue-0);
          font-weight: bold;
        }
        &.cm-keyword    { color: var(--purple-selection); }
        &.cm-property   { color: var(--orange-1); }
        &.cm-atom       { color: var(--green-selection-dark); }
        &.cm-number     { color: var(--blue-0); }
        &.cm-positive   { color: var(--green-1); }
        &.cm-negative   { color: var(--red-2); }
    }

    // Make the block cursor visible in dark mode as well
    .CodeMirror .CodeMirror-overwrite .CodeMirror-cursor,
    .CodeMirror.cm-fat-cursor .CodeMirror-cursor {
      background-color: var(--c-primary-shade);
    }

    // HTML tags
    .cm-tag       { color: var(--orange-2); }
    .cm-attribute { color: var(--blue-3); }
    .cm-bracket   { color: var(--grey-1); }
    .cm-string    { color: var(--green-0); }

    // TYPOGRAPHY
    .cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3,
    .cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6,
    .cm-url { color: var(--c-primary-shade); }

    // Style the code block line wrapper classes
    .code-block-line { background-color: #333; }

    /* LISTS */
    .cm-formatting-list-ul,
    .cm-formatting-list-ol { color: var(--c-primary-shade); }

    /* TYPOGRAPHY */
    .cm-quote, .cm-link, .cm-strong, .cm-em { color:var(--c-primary-shade); }
    .cm-spell-error { text-decoration-color: var(--bg-error); }
    .cm-zkn-tag, .cm-zkn-id, .cm-zkn-link, .cm-zkn-link-formatting { color:var(--c-primary-shade); }
    // .cma { color: var(--c-primary-shade); }
    .cma { color: var(--c-primary); }

    // citations
    .citeproc-citation {
      background-color: var(--grey-5);
      &.error { color: var(--bg-error); }
    }

    // Mermaid charts
    .mermaid-chart {
      // THEMING
      // For now, a simple background
      // for easy recognition
      svg { background-color: var(--grey-4); }
    }

    .cm-formatting-escape { color:var(--grey-0); }

    // YAML Frontmatter indicator -- dark version
    .cm-yaml-frontmatter-start {
      color: inherit;

      &::after {
        color: rgb(80, 80, 80);
        background-color: rgb(40, 40, 40);
      }
    }

    .CodeMirror-foldmarker {
      background-color: var(--grey-5);
      color: var(--grey-2);

      &:hover { background-color: var(--grey-4); }
    }

    .CodeMirror-guttermarker-subtle { color: #464646; }

    // The active line when in typewriter mode
    .CodeMirror-linebackground.typewriter-active-line {
      border-top: 2px solid @grey-3;
      border-bottom: 2px solid @grey-3;
      background-color: @grey-6;
    }
}

.CodeMirror-focused .CodeMirror-selected { background-color:var(--selection-dark); }
.CodeMirror .CodeMirror-selected { background-color:var(--selection-dark); }

.CodeMirror-cursor { background: var(--c-primary-shade); }

// Hint related stuff. Hints mustn't be scoped by .CodeMirror as they are
// attached to document.body, not the editor
.CodeMirror-hints {
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border: 1px solid var(--grey-5);

  background: var(--grey-7);
  li.CodeMirror-hint {
    color: var(--grey-0);

    &:hover { background-color: var(--grey-5); }
  }

  li.CodeMirror-hint-active {
    background-color: var(--c-primary-shade);
    color: var(--grey-0);

    &:hover { background-color: var(--c-primary); }
  }

  .cm-hint-colour {
    color: var(--grey-3);
    background-color: var(--grey-5);
  }
}

// Custom styling for the various editors across the app
// -----------------------------------------------------------------------------
#editor .CodeMirror {
  // Code background
  .cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
    background-color: var(--grey-4);
  }
}
